<template>
    <div class="bind-wechat-info-demo">
        <!-- 帮助绑定微信弹窗 -->
        <div v-show="isShowWindow" id="wechat-bind-qr-code">
            <van-icon @click="hideOverlay" id="close-wechat-bind-qr-code" name="cross" />
            <div class="wechat-service-qr-code-hint">
                <div class="join-no-box">绑定码 <span id="bing-wechat-verification-code">{{info.code}}</span></div>
                <a id="copy-verification-code" 
                v-clipboard:copy="info.code" 
                v-clipboard:success="onSuccCopyWechatNo" 
                v-clipboard:error="onErrorCopyWechatNo"
                >{{info.text}}</a>
            </div>
            <!-- 公众号二维码 -->
            <img id="wechat-service-qr-code-img" :src="info.qrcodeUrl">
            <div class="explain-not-zh">
                <div>请加智能客服微信(24小时在线)</div>
                <div>回复绑定码，无需等待马上绑定！</div>
            </div>
        </div>
		<van-overlay :show="isShowOverlay" @click="hideOverlay" />
    </div>
</template>

<script>
// UI组件
import { Overlay, Icon, } from 'vant'

// 自定义方法
import { getBindWechatInfo } from '_network/request'

// 插件
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true

import Vue from 'vue'
Vue.use(Overlay).use(VueClipboard)

export default {
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
    },
    name: 'BindWechatInfo',
    data() {
        return {
            isShowWindow: false,
            info: {
                code: '', // 微信号
                qrcodeUrl: '', // 微信二维码
                text: '复制验证码',
            },
            isShowOverlay: false,
        }
    },
    methods: {
        getInfo() {
            const that = this
            getBindWechatInfo((data) => {
                if (data) {
                    // console.log('data', data)
                    that.showBindWechatInfo(data) // 显示绑定微信信息弹窗
                } else {
                    this.hideOverlay()
                }
            })
        },
        // 显示绑定微信信息弹窗
        showBindWechatInfo(data) {
            // console.log('showBindWechatInfo')
            this.info.text = '复制验证码'
            this.info.code = data.Code
            this.info.qrcodeUrl = data.ScanUrl
            this.isShowOverlay = true
            this.isShowWindow = true
            // this.isShow = false
        },
        // 复制成功
        onSuccCopyWechatNo() {
            this.info.text = '复制成功，请加微信并回复'
        },
        // 复制失败
        onErrorCopyWechatNo() {
            this.info.text = '复制失败'
        },
        hideOverlay() {
            this.isShowOverlay = false
            this.isShowWindow = false
            this.$emit('closeWindow')
        },
    },
    watch: {
        isShow() {
            // console.log('this.isShow', this.isShow)
            if (this.isShow) {
                this.getInfo()
            }
        }
    },
    deactivated() {
        this.hideOverlay()
    },
}
</script>

<style lang="scss" scoped>
#wechat-bind-qr-code {
    text-align: center;
    width: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: white;
    z-index: 102;
    padding: 30px 15px;
    color: #333333;

    #close-wechat-bind-qr-code {
        color: #999999;
        position: absolute;
        top: 5px;
        right: 5px;
        font-weight: bold;
    }

    .wechat-service-qr-code-hint {
        text-align: center;
        padding: 0 35px;
        width: 100%;
        margin-bottom: 30px;
    }

    .join-no-box {
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
    }

    #bing-wechat-verification-code {
        color: red;
        font-weight: bold;
    }

    #copy-verification-code {
        display: inline-block;
        width: 190px;
        height: 30px;
        font-weight: bold;
        color: white;
        text-align: center;
        border-radius: 4px;
        line-height: 30px;
        background: linear-gradient(#11A2D8, #246E89);
        background: -webkit-linear-gradient(#11A2D8, #246E89); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#11A2D8, #246E89); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#11A2D8, #246E89); /* Firefox 3.6 - 15 */
        background: linear-gradient(#11A2D8, #246E89); /* 标准的语法 */
    }

    #wechat-service-qr-code-img {
        width: 140px;
        height: 140px;
    }

    .explain-not-zh {
        font-size: 12px;
        margin-top: 25px;
    }
}
</style>